<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统设置 - 文档智能生成平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/inter-ui@3.19.3/inter.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    colors: {
                        primary: {
                            50: '#eef2ff',
                            100: '#e0e7ff',
                            200: '#c7d2fe',
                            300: '#a5b4fc',
                            400: '#818cf8',
                            500: '#6366f1',
                            600: '#4f46e5',
                            700: '#4338ca',
                            800: '#3730a3',
                            900: '#312e81',
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 font-sans min-h-screen flex flex-col">
    <!-- 加载中遮罩 -->
    <div id="loadingOverlay"
         class="fixed inset-0 bg-white bg-opacity-80 z-50 flex items-center justify-center hidden">
        <div class="text-center">
            <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary-600"></div>
            <p class="mt-2 text-primary-800 font-medium" id="loadingText">正在处理，请稍候...</p>
        </div>
    </div>

    <!-- 顶部导航 -->
    <nav class="bg-white shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <svg class="h-8 w-8 text-primary-600" xmlns="http://www.w3.org/2000/svg" fill="none"
                             viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                        <span class="ml-2 text-xl font-semibold text-gray-900">文档智能生成平台</span>
                    </div>
                </div>
                <div class="flex items-center">
                    <a href="/docs"
                       class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500">
                        <i class="fas fa-home mr-1"></i> 返回主页
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主容器 -->
    <main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-10">
        <div class="mb-8">
            <div class="text-center">
                <h1 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
                    系统设置
                </h1>
                <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
                    配置文档生成相关的默认参数，提高工作效率
                </p>
        </div>
    </div>

        <!-- 提示信息 -->
        <div class="mb-8">
            <div class="rounded-md bg-blue-50 p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-info-circle text-blue-400 text-lg"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-blue-800">关于系统设置</h3>
                        <div class="mt-2 text-sm text-blue-700">
                            <p>您可以在这里配置系统的常用设置，这些设置将应用于所有生成的文档，提高工作效率。设置保存后将立即生效。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 设置表单 -->
        <form id="settingsForm" class="space-y-8">
            <!-- 基本设置 -->
            <div class="bg-white shadow-sm sm:rounded-lg overflow-hidden">
                <div class="px-4 py-5 sm:p-6">
                    <div class="flex items-center mb-4">
                        <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary-100 flex items-center justify-center">
                            <i class="fas fa-user-edit text-primary-600"></i>
                        </div>
                        <h3 class="ml-3 text-lg font-medium text-gray-900">人员信息设置</h3>
                    </div>
                        
                    <div class="mt-5 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
                        <div>
                            <label for="author" class="block text-sm font-medium text-gray-700">文档作者</label>
                            <div class="mt-1">
                                <input type="text" id="author" name="author" th:value="${settings.author}"
                                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
                                       required>
                            </div>
                            <p class="mt-2 text-sm text-gray-500">生成文档时显示的作者姓名</p>
                        </div>

                        <div>
                            <label for="department" class="block text-sm font-medium text-gray-700">所属部门</label>
                            <div class="mt-1">
                                <input type="text" id="department" name="department" th:value="${settings.department}"
                                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                            </div>
                            <p class="mt-2 text-sm text-gray-500">生成文档时显示的所属部门</p>
                        </div>
                        
                        <div>
                            <label for="auditor" class="block text-sm font-medium text-gray-700">文档审核人</label>
                            <div class="mt-1">
                                <input type="text" id="auditor" name="auditor" th:value="${settings.auditor}"
                                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
                                       required>
                            </div>
                            <p class="mt-2 text-sm text-gray-500">负责审核需求文档的人员</p>
                        </div>
                        
                        <div>
                            <label for="analysts" class="block text-sm font-medium text-gray-700">分析人员</label>
                            <div class="mt-1">
                                <input type="text" id="analysts" name="analysts" th:value="${settings.analysts}"
                                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                            </div>
                            <p class="mt-2 text-sm text-gray-500">默认的需求分析人员，多人用逗号分隔</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 文档设置 -->
            <div class="bg-white shadow-sm sm:rounded-lg overflow-hidden">
                <div class="px-4 py-5 sm:p-6">
                    <div class="flex items-center mb-4">
                        <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary-100 flex items-center justify-center">
                            <i class="fas fa-file-alt text-primary-600"></i>
                        </div>
                        <h3 class="ml-3 text-lg font-medium text-gray-900">文档生成设置</h3>
                    </div>

                    <div class="mt-5 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                        <div class="sm:col-span-3">
                            <label for="templateDir" class="block text-sm font-medium text-gray-700">模板目录路径</label>
                            <div class="mt-1 flex">
                                <input type="text" id="templateDir" name="templateDir" th:value="${settings.templateDir}"
                                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
                                       required>
                                <button type="button" class="test-dir-btn ml-2 inline-flex items-center px-3 py-2 border border-primary-300 shadow-sm text-sm leading-4 font-medium rounded-md text-primary-700 bg-white hover:bg-primary-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                                        data-target="templateDir">
                                    <i class="fas fa-check-circle mr-2"></i> 测试
                                </button>
                            </div>
                            <p class="mt-2 text-sm text-gray-500">存放文档模板的目录路径</p>
                </div>
                
                        <div class="sm:col-span-3">
                            <label for="outputDir" class="block text-sm font-medium text-gray-700">输出目录路径</label>
                            <div class="mt-1 flex">
                                <input type="text" id="outputDir" name="outputDir" th:value="${settings.outputDir}"
                                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                <button type="button" class="test-dir-btn ml-2 inline-flex items-center px-3 py-2 border border-primary-300 shadow-sm text-sm leading-4 font-medium rounded-md text-primary-700 bg-white hover:bg-primary-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                                        data-target="outputDir">
                                    <i class="fas fa-check-circle mr-2"></i> 测试
                                </button>
                            </div>
                            <p class="mt-2 text-sm text-gray-500">文档生成后的默认保存路径</p>
                        </div>
                        
                        <div class="sm:col-span-2">
                            <label for="version" class="block text-sm font-medium text-gray-700">文档版本号</label>
                            <div class="mt-1">
                                <input type="text" id="version" name="version" th:value="${settings.version}"
                                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                            </div>
                            <p class="mt-2 text-sm text-gray-500">默认版本号，如 1.0</p>
                        </div>
                        
                        <div class="sm:col-span-2">
                            <label for="companyName" class="block text-sm font-medium text-gray-700">公司名称</label>
                            <div class="mt-1">
                                <input type="text" id="companyName" name="companyName" th:value="${settings.companyName}"
                                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                            </div>
                            <p class="mt-2 text-sm text-gray-500">显示在文档页眉页脚的公司名称</p>
                        </div>
                        
                        <div class="sm:col-span-2">
                            <label for="confidentiality" class="block text-sm font-medium text-gray-700">保密级别</label>
                            <div class="mt-1">
                                <select id="confidentiality" name="confidentiality"
                                        class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                    <option value="普通" th:selected="${settings.confidentiality == '普通'}">普通</option>
                                    <option value="秘密" th:selected="${settings.confidentiality == '秘密'}">秘密</option>
                                    <option value="机密" th:selected="${settings.confidentiality == '机密'}">机密</option>
                                    <option value="绝密" th:selected="${settings.confidentiality == '绝密'}">绝密</option>
                                </select>
                            </div>
                            <p class="mt-2 text-sm text-gray-500">文档默认保密级别</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 需求默认参数 -->
            <div class="bg-white shadow-sm sm:rounded-lg overflow-hidden">
                <div class="px-4 py-5 sm:p-6">
                    <div class="flex items-center mb-4">
                        <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary-100 flex items-center justify-center">
                            <i class="fas fa-sliders-h text-primary-600"></i>
                        </div>
                        <h3 class="ml-3 text-lg font-medium text-gray-900">需求默认参数</h3>
                    </div>

                    <div class="mt-5 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-3">
                        <div>
                            <label for="isKey" class="block text-sm font-medium text-gray-700">是否关键需求</label>
                            <div class="mt-1">
                                <select id="isKey" name="isKey"
                                        class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                        <option value="是" th:selected="${settings.isKey == '是'}">是</option>
                                        <option value="否" th:selected="${settings.isKey == '否'}">否</option>
                                    </select>
                                </div>
                            <p class="mt-2 text-sm text-gray-500">需求默认关键性</p>
                            </div>
                            
                        <div>
                            <label for="urgency" class="block text-sm font-medium text-gray-700">紧急程度</label>
                            <div class="mt-1">
                                <select id="urgency" name="urgency"
                                        class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                        <option value="一般" th:selected="${settings.urgency == '一般'}">一般</option>
                                        <option value="紧急" th:selected="${settings.urgency == '紧急'}">紧急</option>
                                        <option value="非常紧急" th:selected="${settings.urgency == '非常紧急'}">非常紧急</option>
                                    </select>
                                </div>
                            <p class="mt-2 text-sm text-gray-500">需求默认紧急程度</p>
                            </div>
                            
                        <div>
                            <label for="isUrgent" class="block text-sm font-medium text-gray-700">是否加急</label>
                            <div class="mt-1">
                                <select id="isUrgent" name="isUrgent"
                                        class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                        <option value="是" th:selected="${settings.isUrgent == '是'}">是</option>
                                        <option value="否" th:selected="${settings.isUrgent == '否'}">否</option>
                                    </select>
                                </div>
                            <p class="mt-2 text-sm text-gray-500">需求默认加急标识</p>
                        </div>

                        <div>
                            <label for="defaultPriority" class="block text-sm font-medium text-gray-700">需求优先级</label>
                            <div class="mt-1">
                                <select id="defaultPriority" name="defaultPriority"
                                        class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                    <option value="低" th:selected="${settings.defaultPriority == '低'}">低</option>
                                    <option value="中" th:selected="${settings.defaultPriority == '中'}">中</option>
                                    <option value="高" th:selected="${settings.defaultPriority == '高'}">高</option>
                                </select>
                            </div>
                            <p class="mt-2 text-sm text-gray-500">需求默认优先级</p>
                        </div>

                        <div>
                            <label for="defaultComplexity" class="block text-sm font-medium text-gray-700">实现复杂度</label>
                            <div class="mt-1">
                                <select id="defaultComplexity" name="defaultComplexity"
                                        class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                    <option value="简单" th:selected="${settings.defaultComplexity == '简单'}">简单</option>
                                    <option value="一般" th:selected="${settings.defaultComplexity == '一般'}">一般</option>
                                    <option value="复杂" th:selected="${settings.defaultComplexity == '复杂'}">复杂</option>
                                    <option value="非常复杂" th:selected="${settings.defaultComplexity == '非常复杂'}">非常复杂</option>
                                </select>
                            </div>
                            <p class="mt-2 text-sm text-gray-500">需求默认实现复杂度</p>
                        </div>

                        <div>
                            <label for="defaultRisk" class="block text-sm font-medium text-gray-700">风险评估</label>
                            <div class="mt-1">
                                <select id="defaultRisk" name="defaultRisk"
                                        class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                    <option value="无风险" th:selected="${settings.defaultRisk == '无风险'}">无风险</option>
                                    <option value="低风险" th:selected="${settings.defaultRisk == '低风险'}">低风险</option>
                                    <option value="中等风险" th:selected="${settings.defaultRisk == '中等风险'}">中等风险</option>
                                    <option value="高风险" th:selected="${settings.defaultRisk == '高风险'}">高风险</option>
                                </select>
                            </div>
                            <p class="mt-2 text-sm text-gray-500">需求默认风险等级</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 系统配置 -->
            <div class="bg-white shadow-sm sm:rounded-lg overflow-hidden">
                <div class="px-4 py-5 sm:p-6">
                    <div class="flex items-center mb-4">
                        <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary-100 flex items-center justify-center">
                            <i class="fas fa-cogs text-primary-600"></i>
                        </div>
                        <h3 class="ml-3 text-lg font-medium text-gray-900">系统配置</h3>
                    </div>

                    <div class="mt-5 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
                        <div>
                            <label for="autoBackup" class="block text-sm font-medium text-gray-700">自动备份</label>
                            <div class="mt-1">
                                <select id="autoBackup" name="autoBackup"
                                        class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                    <option value="true" th:selected="${settings.autoBackup == 'true'}">启用</option>
                                    <option value="false" th:selected="${settings.autoBackup == 'false'}">禁用</option>
                                </select>
                            </div>
                            <p class="mt-2 text-sm text-gray-500">是否自动备份生成的文档</p>
                        </div>

                        <div>
                            <label for="backupDir" class="block text-sm font-medium text-gray-700">备份目录</label>
                            <div class="mt-1 flex">
                                <input type="text" id="backupDir" name="backupDir" th:value="${settings.backupDir}"
                                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                <button type="button" class="test-dir-btn ml-2 inline-flex items-center px-3 py-2 border border-primary-300 shadow-sm text-sm leading-4 font-medium rounded-md text-primary-700 bg-white hover:bg-primary-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                                        data-target="backupDir">
                                    <i class="fas fa-check-circle mr-2"></i> 测试
                                </button>
                            </div>
                            <p class="mt-2 text-sm text-gray-500">备份文件的存储路径</p>
                        </div>

                        <div>
                            <label for="fileNameFormat" class="block text-sm font-medium text-gray-700">文件命名格式</label>
                            <div class="mt-1">
                                <input type="text" id="fileNameFormat" name="fileNameFormat" th:value="${settings.fileNameFormat}"
                                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
                                       placeholder="{reqNo}_{reqName}">
                            </div>
                            <p class="mt-2 text-sm text-gray-500">支持 {reqNo}, {reqName}, {date} 变量</p>
                        </div>

                        <div>
                            <label for="maxThreads" class="block text-sm font-medium text-gray-700">最大线程数</label>
                            <div class="mt-1">
                                <input type="number" id="maxThreads" name="maxThreads" th:value="${settings.maxThreads}"
                                       min="1" max="10"
                                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                            </div>
                            <p class="mt-2 text-sm text-gray-500">并行处理的最大线程数 (1-10)</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 保存按钮 -->
            <div class="flex justify-end space-x-3">
                <button type="reset" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    <i class="fas fa-undo mr-2"></i> 重置
                </button>
                <button type="button" id="saveSettingsBtn" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    <i class="fas fa-save mr-2"></i> 保存设置
                </button>
            </div>
        </form>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 mt-auto">
        <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
            <p class="text-center text-sm text-gray-500">© 2023 文档智能生成平台 | 版本 2.0</p>
    </div>
    </footer>

    <!-- 消息提示 -->
    <div id="toast" class="fixed top-4 right-4 max-w-xs bg-white rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 ease-in-out z-50 opacity-0 translate-y-2 pointer-events-none">
        <div class="p-4">
            <div class="flex items-start">
                <div id="toastIcon" class="flex-shrink-0">
                    <i class="fas fa-check-circle text-green-400 text-lg"></i>
                </div>
                <div class="ml-3 w-0 flex-1">
                    <p id="toastMessage" class="text-sm font-medium text-gray-900">设置已保存</p>
                </div>
                <div class="ml-4 flex-shrink-0 flex">
                    <button id="closeToast" class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none">
                        <span class="sr-only">关闭</span>
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        </div>
        <div id="toastProgress" class="bg-green-500 h-1" style="width: 100%;"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const loadingOverlay = document.getElementById('loadingOverlay');
            const loadingText = document.getElementById('loadingText');
            const saveSettingsBtn = document.getElementById('saveSettingsBtn');
            const settingsForm = document.getElementById('settingsForm');
            const toast = document.getElementById('toast');
            const toastMessage = document.getElementById('toastMessage');
            const toastIcon = document.getElementById('toastIcon');
            const toastProgress = document.getElementById('toastProgress');
            const closeToast = document.getElementById('closeToast');
            const testDirButtons = document.querySelectorAll('.test-dir-btn');

            // 显示加载中
            function showLoading(text) {
                loadingText.innerText = text || '正在处理，请稍候...';
                loadingOverlay.classList.remove('hidden');
            }

            // 隐藏加载中
            function hideLoading() {
                loadingOverlay.classList.add('hidden');
            }

            // 目录测试
            function testDirectory(dirPath, targetId) {
                if (!dirPath.trim()) {
                    showToast('请输入目录路径', 'warning');
                    return;
                }
                
                showLoading('正在测试目录...');
                
                const params = new URLSearchParams();
                params.append('dirPath', dirPath);
                
                axios.post('/docs/test-directory', params)
                    .then(response => {
                        hideLoading();
                        if (response.data.success) {
                            const result = response.data.data;
                            if (result.exists && result.isDirectory && result.canWrite) {
                                showToast('目录有效且可写', 'success');
                            } else if (result.created && result.canWrite) {
                                showToast('目录已创建并可写', 'success');
                            } else if (!result.exists) {
                                showToast('目录不存在且无法创建', 'error');
                            } else if (!result.isDirectory) {
                                showToast('路径指向的不是一个目录', 'error');
                            } else if (!result.canWrite) {
                                showToast('目录不可写，请检查权限', 'warning');
                            }
                        } else {
                            showToast(response.data.message || '目录测试失败', 'error');
                        }
                    })
                    .catch(error => {
                        hideLoading();
                        console.error('目录测试出错:', error);
                        showToast('目录测试出错: ' + (error.response?.data?.message || error.message), 'error');
                    });
            }

            // 注册目录测试按钮事件
            testDirButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const targetId = this.getAttribute('data-target');
                    const input = document.getElementById(targetId);
                    if (input) {
                        testDirectory(input.value, targetId);
                    }
                });
            });

            // 显示通知消息
            function showToast(message, type = 'success') {
                // 配置样式
                if (type === 'success') {
                    toastIcon.innerHTML = '<i class="fas fa-check-circle text-green-400 text-lg"></i>';
                    toastProgress.className = 'bg-green-500 h-1';
                } else if (type === 'error') {
                    toastIcon.innerHTML = '<i class="fas fa-times-circle text-red-400 text-lg"></i>';
                    toastProgress.className = 'bg-red-500 h-1';
                } else if (type === 'warning') {
                    toastIcon.innerHTML = '<i class="fas fa-exclamation-circle text-yellow-400 text-lg"></i>';
                    toastProgress.className = 'bg-yellow-500 h-1';
                } else {
                    toastIcon.innerHTML = '<i class="fas fa-info-circle text-blue-400 text-lg"></i>';
                    toastProgress.className = 'bg-blue-500 h-1';
                }

                // 设置消息
                toastMessage.textContent = message;
                
                // 显示通知
                toast.classList.remove('opacity-0', 'translate-y-2', 'pointer-events-none');
                toast.classList.add('opacity-100', 'translate-y-0', 'pointer-events-auto');

                // 动画进度条
                toastProgress.style.transition = 'width 5s linear';
                toastProgress.style.width = '100%';
                
                setTimeout(() => {
                    toastProgress.style.width = '0%';
                }, 100);

                // 自动关闭
                const toastTimeout = setTimeout(() => {
                    hideToast();
                }, 5000);

                // 关闭按钮
                closeToast.onclick = () => {
                    clearTimeout(toastTimeout);
                    hideToast();
                };
            }

            // 隐藏通知
            function hideToast() {
                toast.classList.add('opacity-0', 'translate-y-2', 'pointer-events-none');
                toast.classList.remove('opacity-100', 'translate-y-0', 'pointer-events-auto');
            }

            // 表单验证
            function validateForm() {
                const requiredFields = ['author', 'auditor', 'templateDir'];
                for (const field of requiredFields) {
                    const input = document.getElementById(field);
                    if (!input.value.trim()) {
                        showToast(`${input.labels[0].textContent} 不能为空`, 'error');
                        input.focus();
                        return false;
                    }
                }

                const maxThreads = document.getElementById('maxThreads');
                if (maxThreads.value && (maxThreads.value < 1 || maxThreads.value > 10)) {
                    showToast('最大线程数必须在1-10之间', 'error');
                    maxThreads.focus();
                    return false;
                }

                return true;
            }

            // 保存设置
            saveSettingsBtn.addEventListener('click', function () {
                if (!validateForm()) {
                    return;
                }

                // 收集表单数据
                const formData = new FormData(settingsForm);
                const settings = {};
                
                for (const [key, value] of formData.entries()) {
                    settings[key] = value;
                }
                
                showLoading('正在保存设置...');
                
                axios.post('/docs/settings', settings)
                .then(response => {
                    hideLoading();
                    if (response.data.success) {
                            showToast('设置保存成功！', 'success');
                    } else {
                            showToast(response.data.message || '保存失败', 'error');
                    }
                })
                .catch(error => {
                    hideLoading();
                    console.error('保存设置出错:', error);
                        showToast('保存设置失败: ' + (error.response?.data?.message || error.message), 'error');
                });
            });

            // 验证表单输入
            settingsForm.addEventListener('input', function(e) {
                const target = e.target;
                if (target.hasAttribute('required') && !target.value.trim()) {
                    target.classList.add('border-red-300');
                    target.classList.remove('border-gray-300');
                } else {
                    target.classList.remove('border-red-300');
                    target.classList.add('border-gray-300');
                }
            });

            // 重置按钮事件
            settingsForm.addEventListener('reset', function() {
                setTimeout(() => {
                    const inputs = settingsForm.querySelectorAll('input, select');
                    inputs.forEach(input => {
                        input.classList.remove('border-red-300');
                        input.classList.add('border-gray-300');
                    });
                    showToast('表单已重置', 'info');
                }, 10);
            });
        });
    </script>
</body>
</html> 